<template>
	<view class="doctorList-wrap">
		<view class="doctorList-tab"><u-tabs v-model="activeTab" :scroll="false" :tabs="['我的关注(' + likeTotal + ')', '签约医生(' + signTotal + ')']" @change="tabChange"></u-tabs></view>
		<scroll-view show-scrollbar="false" class="doctorList-list" scroll-y @scrolltolower="scrollLoading()">
			<view class="scroll-flex-wrap">
				<view @click="gotoRouter('/pages-hospital/doctorInfo/doctorInfo?id='+doctor.id)" v-for="(doctor, index) in dataList" :key="index" class="doctor-wrap">
					<image class="doctorInfo-card-img" :src="doctor.picture"></image>
					<view class="doctorInfo-card">
						<view class="doctorInfo-card-top">
							<view class="doctorInfo-card-info">
								<view class="doctorInfo-layer1">
									<view class="doctorInfo-layer1-box">
										<view class="doctorInfo-layer1-word2" style="margin-right: 32rpx;">{{ doctor.doctorName }}</view>
										<uni-rate readonly :value="parseFloat(doctor.goodRate) / 20" />
									</view>
									<view class="doctorInfo-layer1-word4">{{ doctor.departmentName }}&nbsp;|&nbsp;{{ jobGradeConfig[doctor.jobGrade] }}</view>
									<view class="doctorInfo-layer1-word3">{{ doctor.hospName }}</view>
								</view>
								<view v-if="activeTab == 0" class="doctorInfo-layer2 nowrap">擅长：{{ doctor.goodsDirection }}</view>
								<view v-if="activeTab == 1" class="sign-time">{{doctor.payTime}} 签约</view>
							</view>
						</view>
						<view class="divider-line"></view>
						<view v-if="activeTab == 0" class="bottom-line-wrap">
							<view class="unlike-btn" @click.stop="unlikeDoctor(doctor.id)">取消关注</view>
						</view>
						<view v-if="activeTab == 1" class="bottom-line-wrap">
							<view class="expire-time">有效期：{{doctor.expireTime}}</view>
							<view class="server-status">{{doctor.statusName}}</view>
						</view>
					</view>
				</view>
			</view>
	
			<u-empty-state v-if="dataTotalPage == 0" value="暂无内容"></u-empty-state>
			<uni-load-more v-if="dataTotalPage > 1" :status="dataLoading"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import uniRate from '@/components/uni/uni-rate/uni-rate.vue';
import uTab from '@/components/u-tabs/u-tabs.vue';
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
	export default {
		components: {
			uniRate,
			uTab,
			uniLoadMore,
			uEmptyState
		},
		data() {
			return {
				activeTab: 0,
				pageNo: 1,
				pageSize: 20,
				dataTotal: 0, //数据总数
				dataTotalPage: 1, //数据总分页
				dataLoading: 'loading', //数据加载
				dataList: [],
				likeTotal: 0,
				signTotal: 0
			};
		},
		onShow() {
			this.initData();
		},
		methods: {
			tabChange(e) {
				this.activeTab = e;
				this.initData();
			},
			
			getStatusStyle(status) {
				return {color: '#FF9660'};
			},
			
			initData() {
				this.pageNo = 1;
				this.dataList = [];
				this.dataTotalPage = 1;
				this.dataTotal = 0;
				this.scrollLoading();
			},
		
			//药品订单列表
			queryDoctorList() {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				};
				if (this.activeTab == 0) {
					this.$api
						.myLikeDoctors({
							params: params
						})
						.then(res => {
							if (res.code == 200) {
								this.dataTotalPage = res.result.pages;
								this.dataTotal = res.result.total;
								this.likeTotal = res.result.total;
								if (this.pageNo == 1) {
									this.dataList = res.result.records;
								} else {
									this.dataList = this.dataList.concat(res.result.records);
								}
							
								if (res.result.current >= res.result.pages) {
									this.dataLoading = 'noMore';
								} else {
									this.dataLoading = 'loading';
								}
								this.pageNo++;
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						});
				} else {
					this.$api
						.mySignDoctors({
							params: params
						})
						.then(res => {
							if (res.code == 200) {
								this.dataTotalPage = res.result.pages;
								this.dataTotal = res.result.total;
								this.signTotal = res.result.total;
								if (this.pageNo == 1) {
									this.dataList = res.result.records;
								} else {
									this.dataList = this.dataList.concat(res.result.records);
								}
							
								if (res.result.current >= res.result.pages) {
									this.dataLoading = 'noMore';
								} else {
									this.dataLoading = 'loading';
								}
								this.pageNo++;
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						});
				}
			},
		
			//滚动加载
			scrollLoading() {
				if (this.pageNo <= this.dataTotalPage) {
					this.queryDoctorList();
				}
			},
			
			unlikeDoctor(id) {
				uni.showModal({
					title: `确认要取消关注吗？`,
					success: res => {
						if (res.confirm) {
							this.$api.likeDoctor({
								data: {
									"id": id,
									"focusFlag": 0
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon:'none',
										title:'操作成功'
									});
									this.pageNo = 1;
									this.queryDoctorList();
								} else {
									uni.showToast({
										icon:'none',
										title:res.message
									});
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
@import './myDoctors.less';
</style>
